<template>
  <forms ref="forms" :config="config" @submit:forms="onsubmit" :btns="btns">
    <template #config="{row}">
      <p v-for="(v,i) in row.value" style="line-height: 1.6;padding: 02px;">
        <input type="hidden" :name="'config['+i+'][title]'" :value="v.title">
        <input type="hidden" :name="'config['+i+'][additional_ids]'" :value="v.additional_ids">
        <input type="hidden" :name="'config['+i+'][multiple]'" :value="v.multiple">
        <input type="hidden" :name="'config['+i+'][required]'" :value="v.required">
        <span v-if="v.required==1">(必选)</span>{{v.multiple==1?'多':'单'}}选项：{{v.title}}[<span v-for="v2 in v.list" class="button on" style="margin: 0 2px;">{{v2.title}}</span>]
        <el-button size="small" type="danger" @click="row.value.splice(i,1)">删除</el-button>
      </p>
      <div v-if="row.show">
        <json_param :config="json_param_config" v-model:value="config_row"></json_param>
        <el-button @click="add_config" size="small" type="primary">添加</el-button>
        <el-button @click="row.show=false" size="small">收起</el-button>
      </div>
      <el-button v-else @click="row.show=true" size="small" type="primary">展开</el-button>
    </template>
  </forms>
</template>

<script>
import {iframe} from "@/js/tool.js";
import {ajax} from "@/js/api_tool.js";
import json_param from "@/components/auto_import/UnifyParam/json_param.vue";
import s94Mjs from "s94-js";

export default {
  components: {json_param},
  props: ['__iframe'],
  data(){
    let id = this.$get('id'), btns = undefined;
    let forms_config = {
      title: {label:'标题',name:'title',type:'text_one',tips:''},
      head_img: {label:'头图',name:'head_img',type:'file_img',tips:''},
      price_type: {label:'价格模式',name:'',type:'radio',config:['设定单价','设定对应数量总价'],tips:'',value:1,onchange:this.change_price_type},
      price: {label:'单价',name:'price',type:'hidden',value:0,tips:''},
      price_vip: {label:'会员单价',name:'price_vip',type:'hidden',value:0,tips:''},
      all_price: {label:'总价',name:'all_price',type:'text_one',value:0,tips:''},
      all_price_vip: {label:'会员总价',name:'all_price_vip',type:'text_one',value:0,tips:''},
      num: {label:'数量',name:'num',type:'text_one',config:'number',tips:'每个商品对应该定制项目的数量', value:1},
      config: {label:'附加项',name:'config',type:'config',tips:'',value:[], show: false},
    }
    if (id){
      forms_config.create_time = {label:'创建时间',name:'create_time',tips:''};
    }
    if (this.$get('is_info')){
      s94Mjs.each(forms_config, function (row){ row.is_info = true; });
      btns = [];
    }
    return {
      id: id,
      btns: btns,
      config: forms_config,
      json_param_config: {
        title: {label:'选项标题',name:'title',type:'text_one',tips:''},
        additional_ids: {label:'附加项选择',name:'additional_ids',type:'list_ids',config:'/additional/index?ban_id='+id,tips:''},
        multiple: {label:'是否多选',name:'multiple',type:'radio_switch',config:['否','是'],tips:'',value: 0},
        required: {label:'是否必选',name:'required',type:'radio_switch',config:['否','是'],tips:'',value: 0},
      },
      config_row: '{}',
    }
  },
  methods: {
    onsubmit(formData){
      let row = JSON.parse(this.config_row);
      if (row.title || row.additional_ids){
        this.$confirm('存在未添加的附加项目配置，如果提交未添加的配置项会被舍弃，是否舍弃', '操作确定').then(()=>{
          this.config_row = '{}';
          this.send(formData);
        }).catch(()=>{})
      }else {
        this.send(formData);
      }
    },
    send(formData){
      let url = this.id ? `/admin/additional/edit?id=`+this.id : '/admin/additional/add';
      ajax({url:url, method:'POST', data:formData}, (res)=>{
        if (this.__iframe){
          iframe.exe('additional/index', '$refs.list_url.list');
          iframe.hide('additional/edit');
          if (!this.id) this.$refs['forms'].init();
        }else {
          this.$router.push('index');
        }
      }, (res)=>{
        if (res.errors) this.$refs['forms'].errors = res.errors;
      })
    },
    add_config(callback){
      let app = this;
      callback = typeof(callback) =='function' ? callback : function (){ app.$message.success('添加完成');}
      let row = JSON.parse(app.config_row);
      if (!row.title) return app.$message.error('选项标题不能为空！');
      if (!row.additional_ids) return app.$message.error('附加项不能为空！');
      ajax({
        url: '/admin/additional/list',
        data: {'where[id][in]': row.additional_ids},
        loading: true,
      }, function (res){
        let list = res.data.list;
        if (!list.length) return app.$message.error('附加项不能为空！');
        row.list = list;
        app.config.config.value.push({
          title: row.title,
          additional_ids: row.additional_ids,
          list: list,
          multiple: row.multiple || 0,
          required: row.required || 0,
        })
        app.config_row = '{}';
        callback();
        return false;
      })
    },
    change_price_type(row, v){
      let show_k = v==0 ? 'price' : 'all_price';
      let hide_k = v==1 ? 'price' : 'all_price';

      this.config[show_k].type = this.config[show_k+'_vip'].type = 'text_one';
      this.config[hide_k].type = this.config[hide_k+'_vip'].type = 'hidden';
      this.config[hide_k].value = this.config[hide_k+'_vip'].value = 0;
    }
  },
  mounted() {
    let app = this;
    if (!this.__iframe) window['app'] = this;
    if (this.id) {
      ajax({url:'/admin/additional/info?id='+this.id, cache:true}, (res)=>{
        this.$refs['forms'].init(res.data);
        if (res.data.all_price == 0 && res.data.all_price_vip == 0) {
          this.config.price_type.value = 0;
          this.change_price_type({}, 0);
        }
        return false;
      }, ()=>{
        if (this.__iframe){
          iframe.remove('additional/edit');
        }else {
          this.$router.push('index');
        }
      })
    }

    //其他初始化操作
  }
}
</script>
